<template>
	<!-- 企业专区 -->
	<view class="content">
		
		<view class="empty">
			<image :src="backgroundImgUrl" mode="scaleToFill"></image>
		</view>
		<span>企业专区</span>
		<view class="main">
			<view class="select">
				<view class="childBox" v-for="item,index in selectList" :key="index"
				:style="index===curNow1?'background-color: #F3F7F8;color:#001A18':''" 
				@click="sectionChange(index)">
					<span>{{item}}</span>
				</view>
			</view>
			<view class="tag" >
				<view class="childBox" v-for="item,index in tagList" :key="index"
				:style="index===curNow2?'border: 1px solid #08C8BD;color: #08C8BD;':''"
				@click="tagChange(index)">
					{{item}}
				</view>
			</view>
			
			<JobCard v-for="item,index in jobList" :key="index"></JobCard>
			
		</view>
	</view>
</template>

<script>
	import JobCard from '@/subpageB/components/jobCard.vue'
	export default {
		data() {
			return {
				backgroundImgUrl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/31791c1b-36c7-42f1-851b-c73a2565e92d.png',			//背景图地址
				selectList: ['最新发布', '离我最近', '薪资最高'],
				tagList:['全部','KFC','必胜客','ZARA'],
				jobList:[1,1,1,1,1],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow1:0,
				curNow2:0
			}
		},
		components:{
			JobCard
		},
		methods: {
			sectionChange(index) {
				this.curNow1 = index;
			},
			tagChange(index){
				this.curNow2=index
			}
		}
	}
</script>

<style lang="scss">
	.content{
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding: 1rpx 0;
		background-color: #F3F7F8 ;
		/* background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/31791c1b-36c7-42f1-851b-c73a2565e92d.png');
		background-repeat: no-repeat;
		background-size: 100%; */
		
	}
	.content .empty{
		width:100%;
		height: 248rpx;
		z-index: -1;
		>image{
			
			width: 100vw;
			height: 278rpx;
		}
	}
	.content>span{
		position: absolute;
		top: 164rpx;
		left: 32rpx;
		font-size: 20px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20px;
		
	}
	.main{
		
		width: 100%;
		border-radius: 8px 8px 0 0px;
	}
	
	.select{
		display: flex;
		width: 100%;
		height:96rpx ;
	}
	.select .childBox{
		flex:1;
		background-color: #08C8BD;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.select .childBox:nth-child(1){
		border-radius: 8px 0px 0px 0px;
	}
	.select .childBox:nth-child(2){
		border-radius: 0px 0px 0px 8px;
	}
	.select .childBox:nth-child(3){
		border-radius: 0px 8px 0px 0px;
	}
	
	.tag{
		display: flex;
		width: 100%;
	}
	.tag .childBox{
		margin: 20rpx 0 20rpx 20rpx;
		padding:6rpx 10rpx;
		border: 1px solid #FFFFFF;
		font-size: 12px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #001A18;
		background-color: #FFFFFF;
		border-radius: 4px 4px 4px 4px;
	}
	.tag .childBox span{
		display: inline-block;
		margin: 6rpx 20rpx;
	}
	

</style>
